<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/jquery-3.6.0.min.js}"></script>
<body>
<style>
    #goodsItemDiv>div{
        padding :10px;
    }

    /*[type=checkbox]{*/
    /*    width:15px;*/
    /*    height: 15px;*/
    /*}*/
</style>
<div class="layui-fluid">
    <div class="layui-row" style="margin-top: 50px">
        <div class="layui-col-md8 layui-col-md-offset2">
            <div style="display: flex">
                <i class="layui-icon layui-icon-left" style="margin-left: 10px;" onclick="window.location='/buyer/goods/goodsList'"></i>
                <h2 style="color: red;margin-left: 15px">全部商品<span th:text="${session.carCount}"></span></h2>

            </div>

            <div style="display: flex;align-items: center;border-top: solid lightgray 1px;"  id="goodsItemDiv" th:each="c:${shopcar}">
                <div><input type="checkbox" th:id="'check-'+${c.cno}"></div>
                <div><img th:src="@{${c.goods.icon}}" style="width: 100px;height: 100px"></div>
                <div style="width: 200px" th:text="${c.goods.name}">商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题商品标题</div>
                <div style="width: 100px;">￥<span th:text="${c.goods.price}" th:id="'price-'+${c.cno}"></span></div>
                <div style="display: flex">
                    <div th:id="'add-'+${c.cno}" style="height: 10px;width: 10px;background: lightgray;justify-content:center;user-select: none;padding: 10px;line-height: 10px">+</div>
                    <input th:id="'count-'+${c.cno}" value="0" style="width: 30px;text-align: center" th:value="${c.count}">
                    <div th:id="'cut-'+${c.cno}" style="height: 10px;width: 10px;background: lightgray;text-align: center;user-select: none;padding: 10px;line-height: 10px">-</div>
                </div>
                <div style="font-weight: bold;width: 100px">￥<span th:text="${c.goods.price*c.count}" th:id="'singleCount-'+${c.cno}">139.00</span></div>
                <div style="width: 50px">库存<span style="font-weight: bold" th:text="${c.goods.inventory}"></span>件</div>
                <div><button class="layui-btn layui-btn-danger layui-btn-xs" th:id="'delete-'+${c.cno}">删除</button></div>
            </div>
            <div style="width: 100%;position: fixed;bottom: 0;left:0;right:0;height: 60px;box-shadow: 0 0 10px lightgray;">
                <div style="display: flex;justify-content: space-between;margin-right: 20%">
                    <div style="display: flex;margin-left: 250px">
                        <div style="padding: 10px;"><input type="checkbox" id="checkAll">全选</div>
                        <div style="margin-left: 20px;padding: 10px" id="delete2">删除选中商品</div>
                    </div>
                    <div style="display: flex">
                        <div style="margin-right: 20px;padding: 10px" >已选<span style="color: red;font-weight: bold;margin: 5px" th:id="carCount">0</span>商品</div>
                        <div style="color:gray; padding: 10px">总价:<span style="color: red;font-size: 20px;margin-right: 20px;font-weight: bold" th:id="allcost">0.0</span></div>
                        <div style="color: white;background:#e64347;padding: 10px;font-size: 20px;height: 60px;line-height: 40px" id="goStatement">结算</div>
                    </div>
                </div>
            </div>
    </div>
</div>
</div>

<div>
<form th:action="@{/buyer/order/insertPre}" method="post" id="carForm">
    <input type="hidden" name="orderInfoStr" id="orderInfoStr"/>
    <input type="hidden" name="allCost" id="allCostVal">
</form>
</div>

<script th:inline="javascript" type="text/javascript">

    function getSumCost(){

        let allCost=0.0;
        let singleCost=0.0
        $("[id^=check-]").each(function (){
            if(this.checked){
                let shopCarId=this.id.split('-')[1];
                let count=$("#count-"+shopCarId).val();

                let price=parseFloat($("#price-"+shopCarId).text());


                singleCost=Number(count)*Number(price)

                allCost+=count*price;

               $("#singleCount-"+shopCarId).text(singleCost.toFixed(1));


            }
        })
        $("#allcost").text(allCost.toFixed(1));

        return allCost.toFixed(1);
    }


    function getCarCount(){
        let carCount=0;
        $("[id^=check-]").each(function (){
            if(this.checked){
                carCount+=1;
            }
        })
        $("#carCount").text(carCount);
        return carCount;
    }

    $(function (){

        let shopcar=[[${shopcar}]];
        layui.use(['table','form','layer'],function(){
            var table=layui.table;
            var layer=layui.layer;
            var form=layui.form;

            //点击加号触发事件
            $("[id^=add-]").click(function (){
                let id=this.id.split('-')[1];
                let count=$("#count-"+id).val();
                count++;
                $("#count-"+id).val(count);
                if(count!=0){
                    $("#check-"+id)[0].checked=true;
                }else{
                    $("#check-"+id)[0].checked=false
                }
                getSumCost();
            })

            //点击减号触发事件
            $("[id^=cut-]").click(function (){
                let id=this.id.split('-')[1]
                let count=$("#count-"+id).val();
                if(count>1){
                    count--;
                }
                $("#count-"+id).val(count);
                if(count!=0){
                    $("#check-"+id)[0].checked=true;
                }else{
                    $("#check-"+id)[0].checked=false
                }
                getSumCost();
            })

            //全选按钮
            $("#checkAll").click(function (){
                let checked=this.checked;
                $("[id^=check-]").each(function (){
                    this.checked=checked;
                })
                getSumCost();
                getCarCount();
            })

            //单选框
            $("[id^=check-]").click(function (){
                getSumCost();
                getCarCount();
            })

            //数量输入框
            $("[id^=count-]").change(function (){
                let id=this.id.split('-')[1];
                if(this.value<0){
                    this.value=0;
                }
                let count=this.value;
                if(count!=0){
                    $("#check-"+id)[0].checked=true;
                }else{
                    $("#check-"+id)[0].checked=false;
                }
                getSumCost();

            })


            layui.use('layer',function (){
                $("#delete2").click(function (){

                    layer.confirm('确定要删除吗', {
                        btn: ['ok', 'no']},function (){
                    $("[id^=check-]").each(function (){
                        if(this.checked){
                            let id=this.id.split('-')[1];
                            $.ajax({
                                url: '/buyer/shopcar/delete/'+id,
                                type: "post",
                                success: function(res){
                                    if(res.res){
                                        layer.msg(res.msg,{time:500},function (){
                                            location.href='/buyer/shopcar/shopcarList'
                                        })
                                    }
                                },
                            })
                        }
                    })
                    })


            })
            })
            //删除按钮
            layui.use('layer',function (){
                $("[id^=delete-]").click(function (){
                    let id=this.id.split('-')[1];
                    layer.confirm('确定要删除吗', {
                        btn: ['ok', 'no']},function (){
                        $.ajax({
                            url: '/buyer/shopcar/delete/'+id,
                            type: "post",
                            success: function(res){
                                if(res.res){
                                    layer.msg(res.msg,{time:1000},function (){
                                        location.href='/buyer/shopcar/shopcarList'
                                    })
                                }
                            },
                        })
                        })

                    })



                })


            //结算按钮
            $("#goStatement").click(function (){
                let arr=[];
                let car={};
                //对每个id为check-开头的遍历
                $("[id^=check-]").each(function (){
                    let cars=[[${shopcar}]];
                    if(this.checked){
                        //获取id号 之前设置的是cno
                        let id=this.id.split('-')[1];
                        let count=$("#count-"+id).val();
                        for(let x=0;x<cars.length;x++){
                            let ca=cars[x];
                            if(id==ca.cno){
                                car=ca;//此时car中的属性有cno bno sno gno totalPrice count加入订单表差收货地址（订单界面） 状态（后台） 支付时间（自动） ono（自动）
                                car.totalPrice=$("#singleCount-"+id).text();
                                car.count=count;
                            }
                        }
                        //将所有对象装到一个数组
                        arr.push(car);
                    }
                })
                $("#orderInfoStr").val(JSON.stringify(arr));
                $("#allCostVal").val(getSumCost());
                $("#carForm").submit();
            })
        })
    })
</script>
</body>

</html>